<template>
	<view class="">
		<view class="title">
			<image src="@/static/images/login/union-icon.png" class="icon"></image> <text class="text">会费缴纳</text>
		</view>
		<div class="pay" @click="handleNavTo">
			
			<view class="pay-info">
				<view class="left">
					<view class="pay-info-name">
							{{payInfo.year}}年度工会互助金
					</view>
				<view class="pay-info-status">
					{{payInfo.payStatus?'已缴费':'待缴费'}} {{payInfo.money}}	
				</view>
					 
				</view>
				<div class="right">
					<button size="default" type="default" class="button"
						style="color:#ffffff;backgroundColor:#C70707;borderColor:#1AAD19; width: 90%;"
						hover-class="is-hover" @click.stop="handlePay">	{{payInfo.payStatus?'缴费历史':'支付'}}</button>
				</div>
			</view>
			<view class="info">
				忠诚党的事业  竭诚服务职工
			</view>
		</div>
		
		<!-- 支付弹窗 -->
		<uni-popup ref="popup"  >
			<view class="pop" >
				<!-- ... -->
				<view class="top">
					<view>缴纳会费金额（元）</view>
					<view>{{payInfo.money}}</view>
				</view>
				<view class="divider">
					<div class="dot left"></div>
					<div class="dot right"></div>
				</view>
				<view class="form">
					<view class="">
						<view class="label">
							所属工会
						</view>
						<view class="info">
							甘肃公航旅信息科技有限公司	工会委员会
						</view>
					</view>
				<view class="">
					<view class="label">
						缴费人员
					</view>
					<view class="info">
						信小科
					</view>
				</view>
				<view class="">
					<view class="label">
						缴费年度
					</view>
					<view class="info">
						{{payInfo.year}}年度
					</view>
				</view>
				</view>
				
				<view class="button">
					<button size="mini" type="default" class="button"
						style="width: 20%;display: inline-block;margin-right: 50rpx;"
						hover-class="is-hover" @click="cancel">取消</button>
					<button size="mini" type="default" class="button"
						style="display: inline-block;color:#ffffff;backgroundColor:#C70707;borderColor:#1AAD19; width: 20%;"
						hover-class="is-hover" @click="confirm">确定</button>
				</view>
			</view>
	
		</uni-popup>
	</view>
</template>


<script lang="ts" setup>
	import { ref } from 'vue';
	const popup = ref()
	const payInfo= ref({
		year:2024,
		payStatus:false,
		money:100
	})
	
	// 
	const handlePay = ()=>{
		popup.value.open('center')
	}
	// 跳转到缴费记录
	const handleNavTo =()=>{
		uni.navigateTo({
			url: '/pages/biz/pay/history'
		})	
	}
	
	const cancel = ()=>{
		popup.value.close()
	}
	const confirm =()=>{
		popup.value.close()
	}
	
</script>
<style lang="scss" scoped>
	.title{
		text-align: center;
		line-height: 100rpx;
		display: flex;
		width: 40%;
		text-align: center;
		margin: 0 auto;
		justify-content: space-evenly;
		color: #C70707 100%;
		font-size: 40rpx;
		font-weight: bolder;
		font-style: italic;
		.icon{
			margin: 20rpx;
			height: 60rpx;
			width: 60rpx;
	
		}
		.text{
			color: #C70707;
			font-size: 40rpx;
			font-weight: bolder;
			font-style: italic;
		}
	}
	.pay{
		height: 250rpx;
		width: 90%;
		margin: 0 auto;
		margin-top: 20rpx;
		line-height: 30pt;
		border-radius: 10pt;
		background-color: rgba(253,235,235,1);
		color: rgba(212,99,72,1);
		font-size: 12pt;
		text-align: center;
		box-shadow: 0pt 2pt 6pt 0pt rgba(0,0,0,0.4);
		font-family: -regular;
		border: 0pt solid rgba(187,187,187,1);
		.pay-info{
			width: 100%;
			display: flex;
			text-align: center;
			.left{
				line-height: 80rpx;
				width: 60%;
			}
			.right{
				
				width: 40%;
				.button{
					margin-top: 40rpx;
				}
			}
		}
		
		.pay-info-name{
			color: #920000 100%;
			font-size: 30rpx;
		}
		.pay-info-status{
			color: #920000 100%;
			font-size: 60rpx;
			font-weight: bold;
		}
	}
	.pop{
	    background-color:#fff;
		width: 600rpx;
		padding-bottom: 20rpx;
		padding-top: 20rpx;
		height: 400rpx;
		border-radius: 20rpx;
		color: #000;
		.divider{
			border-bottom: 1px dashed  #aaa;
			width: 600rpx;
			margin-bottom: 30rpx;
			position: relative;
			.left{
				left: 0rpx;
				top: -10rpx;
				position: absolute;
				background-color: rgba(0, 0, 0, 0.4);
				width: 10rpx;
				height: 20rpx;
				border-top-right-radius: 100%;
				border-bottom-right-radius: 100%;
				overflow: hidden;
			}
			.right{
				right: 0rpx;
				top: -10rpx;
				position: absolute;
				background-color: rgba(0, 0, 0, 0.4);
				width: 10rpx;
				height: 20rpx;
				border-top-left-radius: 100%;
				border-bottom-left-radius: 100%;
				overflow: hidden;
			}
			.dot{
				 
			}
		}
		.top{
			text-align: center;
			font-size: 30rpx;
			font-weight: bold;
			line-height: 40rpx;
		}
		.form{
			.label{
				display: inline-block;
				width:150rpx;
				color: #C0C0C0 100%;
				text-align: right;
				height: 50rpx;
			}
			.info{
				
				vertical-align: top;
				display: inline-block;
				width:400rpx;
				margin-left: 10rpx;
				line-height: 40rpx;
				font-weight: bold;
			}
		}
		.button{
			margin-top: 10rpx;
			text-align: center;
		}
	}
</style>

